<template>
	<el-dialog draggable destroy-on-close v-model="dialogShow" :close-on-click-modal="false" width="60%" @close="onClose">
		<el-form ref="formRef" :rules="formRules" :model="formData" size="default" label-width="90px">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="标题" prop="Title">
						<el-input v-model="formData.Title" placeholder="请输入标题" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="状态" prop="Status">
						<el-switch v-model="formData.Status" inline-prompt active-text="开启" inactive-text="关闭"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="类型" prop="Type">
						<el-radio-group v-model="formData.Type">
							<el-radio label="20">通知</el-radio>
							<el-radio label="10">公告</el-radio>"
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="内容" prop="Content">
						<Editor v-model:get-html="formData.Content" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onClose" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref,defineAsyncComponent } from 'vue';
import { Get, Post, Put } from '/@/common/http';
import EMsg from '/@/common/eMsg';
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
const emit = defineEmits(['refresh']);
const dialogShow = ref(false);
const formRef = ref();
const formRules = ref({
	Title: [{ required: true, message: '标题不可为空', trigger: 'blur' }],
});
const formData = ref({
	Id: 0,
	Title: '',
	Content: '',
	Status: true,
	Type: '20',
});

const onShow = (id: number) => {
	dialogShow.value = true;
	formData.value.Id = id;
	if (id > 0) {
		Get('SysNotice/GetSysNoticeDetail', { Id: id }).then((res:any)=>{
			formData.value = res.Data;
		})
	}
};
const onClose = () => {
	formRef.value.resetFields();
	formData.value.Content='';
	dialogShow.value = false;
};
const onSubmit = () => {
	formRef.value.validate((valid: any) => {
		if (valid) {
			if (formData.value.Id > 0) {
				Put('SysNotice/PutSysNotice', formData.value, (res: any) => {
					EMsg.success(res.Message);
					onClose();
					emit('refresh');
				});
			} else {
				Post('SysNotice/AddSysNotice', formData.value, (res: any) => {
					EMsg.success(res.Message);
					onClose();
					emit('refresh');
				});
			}
		}
	});
};

defineExpose({
	onShow,
});
</script>
